import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource)
// 导入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

// 每次刚进入 网站，肯定会 调用 main.js 在刚调用的时候，先从本地存储中，把 购物车的数据读出来，放到 store 中
var car=JSON.parse(localStorage.getItem('car')) || []
// 创建仓储store
var store=new Vuex.Store({
    state:{
      userId:localStorage.getItem('data'),
      // 将 购物车中的商品的数据，用一个数组存储起来，在 car 数组中，存储一些商品的对象， 咱们可以暂时将这个商品对象，设计成这个样子   
      // { id:商品的id, count: 要购买的数量, price: 商品的单价，selected: true  }
      car:car
    },
    mutations:{
     setUser(state,data){
        localStorage.setItem('data',data)
        state.userId=data
     },
     addShop(state,goodinfo){
        // 点击加入购物车，..........................................................把商品信息，保存到 store 中的 car 上
      // 分析：
      // 1. 如果购物车中，之前就已经有这个对应的商品了，那么，只需要更新数量
      // 2. 如果没有，则直接把 商品数据，push 到 car 中即可

      // 假设 在购物车中，没有找到对应的商品
       var flag=false;
       state.car.some( item=>{
          if(item.id == goodinfo.id){
            item.count += parseInt(goodinfo.count);
            flag=true;
            return true;
          }
       })
       // 如果最终，循环完毕，得到的 flag 还是 false，则把商品数据直接 push 到 购物车中
       if(flag===false){
         state.car.push(goodinfo);
       }
          // 当 更新 car 之后，把 car 数组，存储到 本地的 localStorage 中
          localStorage.setItem('car',JSON.stringify(state.car));
     },
      // 修改购物车中商品的数量值
     updataShop(state,goodinfo){
        // 如果查询数组中唯一的元素, 用some方法更合适,
      state.car.some(item=>{
        if(item.id===goodinfo.id){
          item.count=parseInt(goodinfo.count);
          return true;
        }
      })
      // 当修改完商品的数量，把最新的购物车数据，保存到 本地存储中
       localStorage.setItem('car',JSON.stringify(state.car));
     },
     removeid(state,id){
       state.car.some((item,i)=>{
          if(item.id==id){
            state.car.splice(i,1);
            return true;
          }
       })
        // 当修改完商品的数量，把最新的购物车数据，保存到 本地存储中
        localStorage.setItem('car',JSON.stringify(state.car));
     },
    //  同步商品的状态
     swichChange(state,info){
       state.car.forEach(item=>{
         if(item.id==info.id){
           item.selected=info.selected
         }
       })
        // 当修改完商品的数量，把最新的购物车数据，保存到 本地存储中
        localStorage.setItem('car',JSON.stringify(state.car));
     }
    },
    // 相当于计算属性
    getters:{
      // 购物车的总数量
      getAllcount(state){
        var c=0;
        state.car.forEach(item=>{
           c += item.count;
        })
        return c;
      },
      // 获取数量同步到购物车中
      // <!-- 问题：如何从购物车中获取商品的数量呢 -->
      // <!-- 1. 我们可以先创建一个 空对象，然后循环购物车中所有商品的数据， 把 当前循环这条商品的 Id， 作为 对象 的 属性名，count值作为 对象的 属性值，这样，当把所有的商品循环一遍，就会得到一个对象： { 88: 2, 89: 1, 90: 4 } -->
      getCount(state){
        let num={};
        state.car.forEach(item=>{
          num[item.id]=item.count;
        })
        return num;
      },
      getSwich(state){
        var o={};
        state.car.forEach(item=>{
          o[item.id]=item.selected;
        })
        return o;
      },
      // 结算时的数量和价格
      getShop(state){
        var o={
          count:0,// 勾选的数量
          price:0//勾选的总价
        };
        state.car.forEach(item=>{
          if(item.selected){
            o.count+=item.count;
            o.price+=item.count*item.price;
          }
        })
        return o;
      }
    }
})

router.beforeResolve((to,from,next)=>{
  var userId=store.state.userId
  // console.log(userId)
  // console.log(to)
  if(to.meta.req){
    if(userId=='' || userId==null || to.path=='/login'){
      // console.log(2)
      next('/login')
      return
    }else{
      // console.log(1)
    }
  }
  next()
})
// 动画库
import Animate from 'animate.css'
Vue.use(Animate)
// 导入初始化样式
import './assets/css/reset.css'

// 导入字体图标样式
import './assets/css/iconfont.css'
import './assets/mui/css/mui.min.css'

// 图标mui扩展的样式
import './assets/mui/css/icons-extra.css'

// 按需引入mint组件
// import { Header,Swipe, SwipeItem ,Button} from 'mint-ui';
// import 'mint-ui/lib/style.css'
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
import MintUi from 'mint-ui'
Vue.use(MintUi)
import 'mint-ui/lib/style.css'

// 缩略图插件
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

// 引入解决移动端点击延迟300ms问题
// import fastClick from 'fastclick'
// fastClick.attach(document.body);

// 访问接口的根路径
Vue.http.options.root='http://www.liulongbin.top:3005/'
Vue.http.options.emulateJSON=true////  全局启用emulateJSON 选项
//全局过滤器
// 时间格式化的插件
import moment from 'moment'

Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
    return moment(dataStr).format(pattern)
})
Vue.filter("updata",function(value){return value.replace(/2015/g,"2019")})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  // 把store挂载到实例
  store,
  components: { App },
  template: '<App/>'
})
